<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="ajile/com.iskitz.ajile.js?mvcoff,mvcshareoff,refresh"></script>
<script type="text/javascript" src="org.wattdepot.gdata.GDataLoader.js"></script>
<script type="text/javascript" src="org.wattdepot.gdata.kukuicup.Configuration.js"></script>
<script type="text/javascript" src="org.wattdepot.gdata.makahiki.HotSpotChart.js"></script>
 
<script type="text/javascript">
// Because the show and hide tooltip functions need to be defined globally, this code cannot be wrapped in an anonymous function.
// Therefore namespace pollution is a potential problem. Resolve by doing everything inside the GDataLoader call. 
new org.wattdepot.gdata.GDataLoader(
  // Callback function
  function (datatable) {
    var configuration = new org.wattdepot.gdata.kukuicup.Configuration();
    var hotSpotChart = new org.wattdepot.gdata.makahiki.HotSpotChart(configuration);
    // Set all configuration parameters to default values (for documentation purposes).
    hotSpotChart.setMapXOffset(75);
    hotSpotChart.setMapYOffset(158);
    hotSpotChart.setMapColumnWidth(17.3);
    hotSpotChart.setMapRowHeight(21.5);
    // Now draw the chart.
    hotSpotChart.draw(datatable, 'img');
    // Define these two functions globally.
    showHotSpotTooltip = hotSpotChart.showHotSpotTooltip;
    hideHotSpotTooltip = hotSpotChart.hideHotSpotTooltip;
    // Set the background and text font and color from configuration.
    var hotSpotChartDiv = document.getElementById('hotSpotChart');
    hotSpotChartDiv.style.backgroundColor = configuration.widgetBackgroundColor;
    hotSpotChartDiv.style.fontFamily = configuration.fontFamily;
    hotSpotChartDiv.style.width = configuration.hotSpotChartWidth;
    var textColor = configuration.widgetHeaderColor;
    document.getElementById('title').style.color = textColor;
    document.getElementById('caption').style.color = textColor;
  },
  // Spreadsheet URL
  'http://spreadsheets.google.com/tq?&key=0An9ynmXUoikYdEU3bF91ZWIwWlVMcklnb09GSHBZN2c&range=A2:G169&gid=5',
  // Refresh interval.
  3600 
);
</script>
</head>

<body>
  <div id="hotSpotChart">
    <div id="title" style="text-indent: 150px; font-weight: bold">Hot Spot Analysis: Hale Ilima</div>
    <div id="tooltip"></div>
    <div id="img"></div>
    <div id="caption" style="margin-left: 20px; width: 470px; font-size: 0.8em"><p>Bigger spots mean more energy used. Red spots indicate issues during that time.  Mouse over any spot for details.</div>
  </div>
</body>
</html>




